<template>
    <vxe-table
            border
            width="100%"
            :tooltip-config="{contentMethod: showTooltipMethod, enterable: true,theme:effect}"
            :loading="loading"
            highlight-hover-row
            :highlight-current-row="highlightCurrentRow"
            show-header-overflow
            align="center"
            :height="tableHeight"
            stripe
            :auto-resize="autoResize"
            :sort-config="{trigger: 'cell'}"
            :edit-config="{trigger: 'manual', mode: 'row'}"
            resizable
            :row-class-name="rowClassName"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            @cell-click="cellClick"
            @cell-dblclick="cellDblclick"
            :context-menu="contextMenu"
            @context-menu-click="menuClick"
            :checkbox-config="{labelField: 'name', checkMethod: checkMethod}"
            header-row-class-name="tableHeader"
            show-overflow
            :max-height="maxHeight"
            :show-header="showHeader"
            ref="xTable"
            :data="tableData"
            class="defaultTable">
        <vxe-table-column type="checkbox" width="60" v-if="mutiSelect"></vxe-table-column>
        <vxe-table-column type="seq" :title="seqNumberTitle" :width="seqNumberTitleWidth"
                          v-if="seqNumber"></vxe-table-column>
        <!--档案管理 按钮操作组-->
        <vxe-table-column title="操作" align="center" :width="operates.width" :fixed="operates.fixed"
                          v-if="operatesShow && isArchivesManagent">
            <template slot-scope="scope">
                <div class="operate-group">
                    <template v-if="$refs.xTable.isActiveByRow(scope.row)">
                        <inner-button text="保存" @click.stop="saveRowEvent(scope.row, scope.seq)"></inner-button>
                    </template>
                    <template v-for="(btn, key) in operates.list" v-else>
                        <el-tooltip class="item" :effect="effect" :content="btn.label" placement="top" :openDelay="1000">
                            <image-button :cls="btn.operatesIcon" @click="btn.method(scope.row, scope.seq)"
                                          v-if="btn.show" :key='btn.id'
                                          :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></image-button>
                        </el-tooltip>
                        <el-tooltip class="item" :effect="effect" :content="btn.label" placement="top" :openDelay="1000">
                            <image-button :cls="btn.operatesIcon" @click="btn.method(scope.row, scope.seq)"
                                          v-if="btn.showRender" :key='btn.id'
                                          :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></image-button>

                        </el-tooltip>
                        <inner-button :text="btn.label" @click="btn.method(scope.row, scope.seq)" :key='btn.id'
                                      v-if="btn.showBtn"
                                      :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></inner-button>
                    </template>
                </div>
            </template>
        </vxe-table-column>
        <!--columnSetting 列表显示-->
        <template v-for="(column, index) in columns" v-if="columnSetting">
            <vxe-table-column
                    :title="column.caption"
                    :key='index'
                    :field='column.propertyName'
                    :minWidth="column.minWidth"
                    v-if="!column.hidden"
                    :align="''+column.textAlignment"
                    :width="column.width"
            >
                <template slot-scope="scope">
                    <template v-if="column.render">
                       <!-- <span v-html="column.render(scope.row, column)"></span>-->
                        <common-tooltip :tip="column.render(scope.row,column)">
                            <span v-html="column.render(scope.row,column)"></span>
                        </common-tooltip>
                    </template>
                    <template v-if="column.dictData">
                        <!--<span v-html="scope.row[column.propertyName + '_Text']"></span>-->
                        <common-tooltip :tip="scope.row[(column.propertyName + '_Text'||column.fieldName + '_Text')]">
                            <span v-html="scope.row[(column.propertyName + '_Text'||column.fieldName + '_Text')]"></span>
                        </common-tooltip>
                    </template>
                    <template v-else>
                        <!--<span v-html="scope.row[column.propertyName]"></span>-->
                        <common-tooltip :tip="scope.row[(column.propertyName||column.fieldName)]">
                            <span v-html="scope.row[(column.propertyName||column.fieldName)]"></span>
                        </common-tooltip>
                    </template>
                </template>
            </vxe-table-column>
        </template>
        <!--档案管理 列表显示-->
        <template v-for="(column, index) in columns" v-if="isArchivesManagent">
            <vxe-table-column
                    :title="column.caption"
                    :key='index'
                    :minWidth="column.minWidth"
                    :field='column.fieldName' :width="column.width" v-if="!column.hidden">
                <template slot-scope="scope">
                    <template v-if="column.render">
                       <!-- <span v-html="column.render(scope.row, column)"></span>-->
                        <common-tooltip :tip="column.render(scope.row,column)">
                            <span v-html="column.render(scope.row,column)"></span>
                        </common-tooltip>
                    </template>
                    <template v-else-if="column.dictData">
                        <!--<span v-html="scope.row[column.fieldName + '_Text']"></span>-->
                        <common-tooltip :tip="scope.row[column.propertyName + '_Text']||scope.row[column.fieldName + '_Text']">
                            <span v-html="scope.row[column.propertyName + '_Text']||scope.row[column.fieldName + '_Text']"></span>
                        </common-tooltip>
                    </template>
                    <template v-else>
                        <!--<span v-html="scope.row[column.fieldName]"></span>-->
                        <common-tooltip :tip="scope.row[(column.propertyName||column.fieldName)]">
                            <span v-html="scope.row[(column.propertyName||column.fieldName)]"></span>
                        </common-tooltip>
                    </template>
                </template>
            </vxe-table-column>
        </template>
        <!--非档案管理 列表显示-->
        <template v-for="(column, index) in columns" v-if="!isArchivesManagent && !columnSetting">
            <vxe-table-column
                    :title="column.title"
                    :key='index'
                    :minWidth="column.minWidth"
                    :show-overflow-tooltip="true"
                    :field='column.field' :width="column.width" v-if="!column.editColumn">
                <template slot-scope="scope">
                    <template v-if="column.render">
                        <!--<span>{{column.render(scope.row, column)}}</span>-->
                        <common-tooltip :tip="column.render(scope.row,column)">
                            <span v-html="column.render(scope.row,column)"></span>
                        </common-tooltip>
                    </template>
                    <template v-else-if="column.title === '具体流程' && column.repeatRendering">
                        <span v-for="(item2, index2) in scope.row.stepInstances">
                            <template v-if="item2.status != 4">
                                 {{item2.name}}
                                (<span style="color:#00AB05;">
                                    {{item2.actualApproverName}}
                                    <span v-if="item2.flag&&item2.auditResult===1"><i class="fa fa-check"
                                                                                      style="color:green;font-size:15px;"></i> </span>
                                    <span v-if="item2.flag&&item2.auditResult===2"><i class="fa fa-close"
                                                                                      style="color:red;font-size:15px;"></i> </span>
                                </span>)
                                <img v-if="item2.status === 0" style="width:16px;height:16px;vertical-align: middle;"
                                     src="../../../imgs/notActive.png">
                                <img v-if="item2.status === 1" style="width:16px;height:16px;vertical-align: middle;"
                                     src="../../../imgs/pending.png">
                                <img v-if="item2.status === 2" style="width:16px;height:16px;vertical-align: middle;"
                                     src="../../../imgs/trueIcon.png">
                                <img v-if="item2.status === 3" style="width:16px;height:16px;vertical-align: middle;"
                                     src="../../../imgs/false.png">
                                <span v-if="index2 != scope.row.stepInstances.length-1"> —> </span>
                            </template>
                        </span>
                    </template>
                    <template v-else-if="column.editColumn">
                        <!--<span v-html="scope.row[column.field]"></span>-->
                        <common-tooltip :tip="scope.row[(column.propertyName||column.fieldName)]">
                            <span v-html="scope.row[(column.propertyName||column.fieldName)]"></span>
                        </common-tooltip>
                    </template>
                    <template v-else-if="column.backListDetailWinShowIcon">
                        <span class="outBorrowLimitTrue outBorrowLimitCommon" v-if="scope.row[column.field] === 1"
                              :title="scope.row['outBorrowLimit_Text']"></span>
                        <span class="outBorrowLimitFalse outBorrowLimitCommon" v-if="scope.row[column.field] === 3"
                              :title="scope.row['outBorrowLimit_Text']"></span>
                        <span class="outBorrowLimitNearFalse outBorrowLimitCommon" v-if="scope.row[column.field] === 2"
                              :title="scope.row['outBorrowLimit_Text']"></span>
                    </template>
                    <template v-else>
                        <common-tooltip :tip="scope.row[column.propertyName||column.field]">
                            <template v-if="column.iconShowRender && column.iconShowRender(scope.row)">
                                {{scope.row[column.propertyName||column.field]}}
                            </template>
                            <template v-else>
                                <span v-html="scope.row[column.propertyName||column.field]"></span>
                            </template>
                            <i :class="`${column.iconClass} cur-p`"
                               v-if="column.iconShowRender && column.iconShowRender(scope.row)"
                               @click="column.method(scope.row, scope.seq)"
                               style="color:rgb(110, 120, 130);font-size:15px;"></i>
                        </common-tooltip>

                    </template>
                </template>
            </vxe-table-column>
            <vxe-table-column
                    :title="column.title"
                    :key='index'
                    :field='column.field' :width="column.width" v-if="column.editColumn"
                    :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}">
            </vxe-table-column>
            <vxe-table-column
                    :title="column.title"
                    :key='index'
                    :field='column.field' :width="column.width" v-if="column.editColumnShowInput"
                    :edit-render="{immediate: true}">
                <template slot-scope="scope">
                    <el-input v-model="scope.row[column.field]" size="mini" placeholder="单行输入" clearable></el-input>
                </template>
            </vxe-table-column>
        </template>
        <!--非档案管理 按钮操作组-->
        <vxe-table-column :title="operateTitle" align="center" :width="operates.width" :fixed="operates.fixed"
                          v-if="!operates.hidden&&operatesShow && !isArchivesManagent">
            <template slot-scope="scope">
                <div class="operate-group">
                    <template v-if="$refs.xTable.isActiveByRow(scope.row)">
                        <inner-button text="保存" @click.stop="saveRowEvent(scope.row, scope.seq)"></inner-button>
                    </template>
                    <template v-for="(btn, key) in operates.list" v-else>
                        <el-tooltip class="item" :effect="effect" :content="btn.label" placement="top" :openDelay="1000">
                            <image-button :cls="btn.operatesIcon" @click="btn.method(scope.row, scope.seq)"
                                          v-if="btn.show" :key='btn.id'
                                          :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></image-button>
                        </el-tooltip>
                        <el-tooltip class="item" :effect="effect" :content="btn.label" placement="top" :openDelay="1000">
                            <image-button :cls="btn.operatesIcon" @click="btn.method(scope.row, scope.seq)"
                                          v-if="btn.showRender&&btn.showRender(scope.row)" :key='btn.id'
                                          :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></image-button>
                        </el-tooltip>
                        <inner-button :text="btn.label" @click="btn.method(scope.row, scope.seq)" :key='btn.id'
                                      v-if="btn.showBtn && !btn.labelRender && !btn.showBtnRender"
                                      :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></inner-button>
                        <inner-button :text="btn.label" @click="btn.method(scope.row, scope.seq)" :key='btn.id'
                                      v-if="btn.showBtnRender && btn.showBtnRender(scope.row)"
                                      :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></inner-button>
                        <inner-button :text="btn.labelRender && btn.labelRender(scope.row, scope.seq)"
                                      @click="btn.method(scope.row, scope.seq)" :key='btn.id'
                                      v-if="btn.showBtn && btn.labelRender"
                                      :disabled="btn.disabledRender && btn.disabledRender(scope.row)"></inner-button>
                    </template>
                </div>
            </template>
        </vxe-table-column>
        <!--endregion-->
    </vxe-table>
</template>
<script>
    export default {
        data() {
            return {
                commonIconStyle: 'commonIconStyle',
                malr5: 'malr5'
            }
        },
        props: {
            tableData: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            contextMenu: {
                type: [Object, Function],
                default: function () {
                    return {
                        header: {
                            disabled: false,
                            options: [[
                                {
                                    code: 'RESET_RESIZABLE',
                                    name: '重置列宽'
                                },
                                {
                                    code: 'SORT_ASC',
                                    name: '升序'
                                },
                                {
                                    code: 'SORT_DESC',
                                    name: '降序'
                                },
                                {
                                    code: 'FIXED_LEFT_COLUMN',
                                    name: '固定左侧'
                                },
                                {
                                    code: 'FIXED_RIGHT_COLUMN',
                                    name: '固定右侧'
                                },
                                {
                                    code: 'CLEAR_FIXED_COLUMN',
                                    name: '清除固定列'
                                },
                                {
                                    code: 'HIDDEN_COLUMN',
                                    name: '隐藏当前列'
                                },
                                {
                                    code: 'RESET_COLUMN',
                                    name: '重置列的可视状态'
                                },
                                {
                                    code: 'test',
                                    name: '自定义'
                                }
                            ]]
                        }
                    };
                }
            },
            columns: {
                type: Array,
                default: () => []
            },
            operates: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            rowClassName: {
                type: [String, Function],
            },
            seqNumberTitle: {
                type: String,
                default: '序号'
            },
            seqNumberTitleWidth: {
                type: String,
                default: '50'
            },
            fixed: false,
            operateTitle: {
                type: String,
                default: '操作'
            },
            tableHeight: Number,
            maxHeight: Number,
            mutiSelect: false, // 是否显示复选框
            loading: false,
            isArchivesManagent: false,
            columnSetting: false,
            seqNumber: false, // 是否显示序号
            operatesShow: false,// 是否显示操作列
            autoResize: false,
            backListDetailWinShowIcon: false,
            highlightCurrentRow: {
                type: Boolean,
                default: true
            },
            isLendout: {
                type: Boolean,
                default: false
            },
            effect: {
                type: String,
                default: 'dark'//light
            },
            showHeader: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            //全选事件
            selectAllEvent({checked, records}) {
                this.$emit('selectAllEvent', checked, records);
            },
            // 单选事件
            selectChangeEvent({checked, records}) {
                this.$emit('selectChangeEvent', checked, records);
            },
            // 列表单击事件
            cellClick({row, rowIndex, $rowIndex}) {
                this.$emit('cellClick', row, rowIndex, $rowIndex);
            },
            // 列表双击事件
            cellDblclick({row, rowIndex, $rowIndex}) {
                this.$emit('cellDblclick', row, rowIndex, $rowIndex);
            },
            // 功能菜单点击
            menuClick(metadata, event) {
                console.log(metadata.menu)
                if (metadata.menu.code == 'test') {
                    console.log(metadata.menu.name)
                }
            },
            // 可编辑表格保存
            saveRowEvent(row, rowIndex) {
                let self = this;
                self.$refs.xTable.clearActived().then(() => {
                    self.$emit('saveRowEvent', row, rowIndex);
                })
            },
            // 重写默认的提示内容
            showTooltipMethod({type, column, row, items, _columnIndex}) {
                // 重写默认的提示内容
                if (column.title === '具体流程' && row && row.stepInstances && row.stepInstances.length > 0 && column.property === 'stepInstances') {
                    let html = '', html2;
                    for (let item of row.stepInstances) {
                        if (item.status !== 4) {
                            html += `${item.name + '(' + item.actualApproverName + ')' + ' —> '}`
                        }
                    }
                    html2 = html.split(' —> ');
                    html2.splice(html2.length - 1, 1);
                    return html2.join(' —> ');
                } else if ((column.type == 'selection' || column.type == 'checkbox') && row && row.canBorrow === false && row.reason) {
                    return row.reason;
                } else if ((column.type == 'selection' || column.type == 'checkbox') && row && row.canChangeBorrower === false && row.reason) {
                    return row.reason;
                } else if ((column.type == 'selection' || column.type == 'checkbox') && this.isLendout && row && row.canLendOut === false && row.lendOutReason) {
                    return row.lendOutReason;
                }
            },

            checkMethod({row}) {
                if (this.isLendout && row.canLendOut === false) {
                    return false;
                }
                if (row.canChangeBorrower == false) {
                    return false;
                }
                if (row.canBorrow == false) {
                    return false;
                }

                return true;
            }
        },
        created() {

        },
        mounted() {

        }
    }
</script>
<style lang="scss" scoped>

</style>